<template>
  <div>
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-9 col-md-7 col-lg-5 m-auto pt-5">
          <!--登录表单窗口-->
          <div class="card mt-5 login-container">
            <!--登录头部信息-->
            <div class="card-header bg-white">
              <div class="login-header">
                <img
                  class="logo"
                  src="https://s.weituibao.com/1582958061265/mlogo.png"
                  alt=""
                />
                <div>
                  <div class="title">新锋商城</div>
                  <div class="tips">Vue3.0 后台管理系统</div>
                </div>
              </div>
            </div>
            <!--登录信息表单-->
            <div class="card-body login-body">
              <el-form
                ref="ruleForm"
                :itemref="form"
                :model="form"
                :rules="rules"
              >
                <el-form-item prop="username">
                  <label for="username" class="label">账号</label>
                  <el-input
                    v-model="form.name"
                    size="medium"
                    placeholder="请输入用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <label for="password" class="label">密码</label>
                  <el-input
                    v-model="form.password"
                    type="password"
                    size="medium"
                    placeholder="请输入密码"
                  ></el-input>
                </el-form-item>
                <div class="agreement">
                  登录表示您已同意
                  <a href="#">《服务条款》</a>
                </div>
                <el-form-item>
                  <el-button
                    @click="submit"
                    class="w-100"
                    type="primary"
                    size="medium"
                    >立即登录
                  </el-button>
                </el-form-item>
                <!-- 新的 -->
                <el-checkbox v-model="checked">下次自动登录</el-checkbox>
                <!-- 久的 -->
                <!-- <el-radio v-model="radio" label="1">  久的</el-radio> -->
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'login',
        data() {
      return {
            form: {
                name: "",
                password: "",
                // checked: true
            },
            checked: true
            ,
            // 表单输入框必填校验
            rules: {
                name: [
                    { required: true, message: "请输入用户名", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ]
            }
        };
        },
        methods: {
            // 登录按钮表单验证
            submit() {
                this.$refs.ruleForm.validate(() => {
                this.$store.dispatch("users/getLogin",this.form).then(()=>{
                   this.$router.push({name: 'index'})
                })
                })
            }
        }
    }
</script>

<style lang="scss">
.login-container {
  width: 420px;
  background-color: #fff;
  border-radius: 4px;
  border: none;
  box-shadow: 0 21px 41px 0 rgb(0, 0, 0 / 20%);
  .login-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0 20px 0;
    height: 160px;
    border: none;
    .logo {
      width: 100px;
      height: 100px;
      margin-right: 20px;
    }
    .title {
      font-size: 28px;
      color: #1baeae;
      font-weight: 700;
    }
    .tips {
      font-size: 12px;
      color: #999;
    }
  }
  .login-body {
    .label:before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
    .agreement {
      margin-left: 5px;
      font-size: 14px;
      line-height: 40px;
      a {
        text-decoration: none;
      }
    }
  }
}
</style>

